<template>
  <div :id="tuXingID" :style="{ height: contentHeigth, width: contentWidth }"></div>
</template>

<script setup>
  import * as echarts from 'echarts'
  import { defineProps, nextTick } from 'vue'

  const props = defineProps({
    tuXingID: String,
    contentHeigth: String,
    contentWidth: String
  })

  const allMachineDisplayState = ref({
    parking: 0,
    running: 0,
    fault: 0,
    offLine: 0
  })
  const color = ref([
    {
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          color: '#e6171e',
          offset: 0
        },
        {
          color: '#e61717',
          offset: 1
        }
      ]
    },
    {
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          color: '#5bbf21',
          offset: 0
        },
        {
          color: '#5bbf21',
          offset: 1
        }
      ]
    },
    {
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          color: '#e68a17',
          offset: 0
        },
        {
          color: '#e68a17',
          offset: 1
        }
      ]
    },
    {
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          color: '#5a595c',
          offset: 0
        },
        {
          color: '#5a595c',
          offset: 1
        }
      ]
    },
    {
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          color: '#FF6061',
          offset: 0
        },
        {
          color: '#FF7E7C',
          offset: 1
        }
      ]
    }
  ])
  const nameList = ref([])
  const valueList = ref([])
  const pieData = ref([])

  const init = (data, data2) => {
    valueList.value = data
    nameList.value = data2
    jisuanList()
    nextTick(() => {
      handleSetVisitChart()
    })
  }

  const jisuanList = () => {
    pieData.value = nameList.value.map((item, index) => {
      return {
        name: item,
        value: valueList.value[index]
      }
    })
  }

  const handleSetVisitChart = () => {
    let myChart = echarts.init(document.getElementById(this.tuXingID))
    let option = {
      title: {
        text: '开停车占比',
        left: 0,
        top: 10
      },
      legend: {
        data: nameList.value,
        orient: 'vertical',
        // bottom:0,
        right: 10,
        top: 'middle',
        bottom: 20,
        icon: 'rect',
        textStyle: {
          color: '#343232',
          fontSize: 16
        }
      },
      color: color.value,
      series: [
        {
          type: 'pie',
          top: 90,
          bottom: 10,
          left: -40,
          data: pieData.value,
          radius: ['25%', '85%'],
          center: ['30%', '35%'],
          labelLine: {
            show: false
          },
          label: {
            show: false
          }
        },
        {
          type: 'pie'
        }
      ]
    }
    myChart.setOption(option)
    // window.addEventListener("resize", function () {
    //   myChart.resize();
    // });
  }
</script>

<style scoped></style>
